<template>
  <div class="containers">
    <div class="container">
          <!-- 顶部标题 -->

          <!-- 中间的总数据 -->
          <div class="totalData">
              <div class="totalList" v-for="(lin,index) in dataList" :key="index">
                  <div class="totaName">
                      <p class="pt">{{lin.name}}</p>
                      <p class="po">{{modeList[lin.value]}}  </p>
                  </div>
                  <div class="totaImg">
                    <img :src="lin.img" />
                  </div>
              </div>
          </div>
          <!-- 图表 -->
          <div class="iconList">
              <div class="frstchar">
                  <div style="padding:15px;width: 100%;height: 100%;">
                    <div id="maychar"></div>
                  </div>
              </div>

              <div class="lastchar" >
                  <div style="padding:15px;width: 100%;height: 100%;">
                   <div id="maycharen"></div>
                  </div>
              </div>
          </div>
          <div class="columnar" >
            <div class="lopop" >
                  <div style="padding:15px;width: 100%;height: 100%;">
                   <div id="maycharenl"></div>
                  </div>
              </div>
              <div class="lopop" >
                  <div style="padding:15px;width: 100%;height: 100%;">
                   <div id="maycharenmode"></div>
                  </div>
              </div>
          </div>
          <!-- <div class="columnar" >
            <div class="lopop" >
                  <div style="padding:15px;width: 100%;height: 100%;">
                   <div id="maycharenmode"></div>
                  </div>
              </div>
          </div>    -->
      </div>
  </div>


</template>

<script>
export default {
  data() {
    return {
      dataList:[
         { name: '平台余额', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610080632.png', id: 1 ,value:'money'},
        { name: '平台商家余额', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610092487.png', id: 2,value:'shop_money'},
        { name: '总资产积分', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610102231.png', id: 3,value:'totalAsset' },
        { name: '云仓积分总金额', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610102231.png', id: 3,value:'cloudMoney' },
        { name: '用户总消费券', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610102231.png', id: 3,value:'totalMoney' },
        { name: '用户总抵扣券', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610112471.png', id: 4,value:"totalCoupon" },
        { name: '用户总绿色积分', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610132278.png', id: 5 ,value:"totalGreen"},
        { name: '订单总金额', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610132278.png', id: 5 ,value:"totalOrderMoney"},
        { name: '订单总补贴券', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610122919.png', id: 6 ,value:'couponTotalOrderMoney'},
        { name: '订单总微信支付', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610080632.png', id: 8 ,value:'WxTotalOrderMoney'},
        { name: '订单总支付宝支付', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610092487.png', id: 9 ,value:'AlTotalOrderMoney'},
        { name: '银行卡订单总金额', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610102231.png', id: 10 ,value:'YlTotalOrderMoney'},
        { name: '商家提现总金额', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610112471.png', id: 11 ,value:"totalBusinessCashMoney"},
        // { name: '商家提现总金额', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610132278.png', id: 12 },
        { name: '消费券支付订单', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610132278.png', id: 5 ,value:"yeTotalOrderMoney"},
        { name: '扫码支付总金额', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610132278.png', id: 5 ,value:"totalScanMoney"},
      ],
      yeTotalOrderMoney:'',     //余额总共
      totDate:[],
      modeList:{},
    };
  },
  created() {
  },
  mounted() {
    this.getData()

  },
  methods: {
    // 使用柱形图，关于其他配置可以去官网查看
    getCharts() {
      const chartBox = this.$echarts.init(document.getElementById("maychar"));
      const chartBoxs = this.$echarts.init(document.getElementById("maycharen"));
      const chartBoxst = this.$echarts.init(document.getElementById("maycharenl"));
      const chartBoxsmode = this.$echarts.init(document.getElementById("maycharenmode"));
      // 第一个
      const option = {
              title: {
              text: '成交统计'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#1A8BFF'
                  }
                }
              },
              legend: {
              data: ['购物券','支付宝', '微信','银联','消费券']
              },
              toolbox: {
              feature: {
                saveAsImage: {}
              }
              },
              grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
              },
              xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: this.totDate
              }
              ],
              yAxis: [
              {
                type: 'value'
              }
              ],
              series: [
                  {
                  name: '购物券',
                  type: 'line',
                  smooth: true,
                  label: {
                    show: true,
                    position: 'top'
                  },
                  areaStyle: {},
                  emphasis: {
                    focus: 'series'
                  },
                  data: this.modeList.couponOrderMoneyList,
                  areaStyle: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [  // 渐变颜色
                        {
                          offset: 0,
                          color: '#E4F2FF',
                        },
                        {
                          offset: 1,
                          color: '#EEF6FF',
                        },
                      ],
                      global: false,
                    },
                },
                itemStyle: {
                // 设置线条上点的颜色（和图例的颜色）
                normal: {
                  color: '#1A8BFF',
                },
              },
              },
               {
                name: '微信',
                type: 'line',
                stack: 'Total',
                label: {
                  show: true,
                  position: 'top'
                },
                areaStyle: {},
                emphasis: {
                  focus: 'series'
                },
                data: this.modeList.WxOrderMoneyList
              },
               {
                name: '支付宝',
                type: 'line',
                stack: 'Total',
                label: {
                  show: true,
                  position: 'top'
                },
                areaStyle: {},
                emphasis: {
                  focus: 'series'
                },
                data: this.modeList.AlOrderMoneyList
              },
               {
                name: '银联',
                type: 'line',
                stack: 'Total',
                label: {
                  show: true,
                  position: 'top'
                },
                areaStyle: {},
                emphasis: {
                  focus: 'series'
                },
                data: this.modeList.YlOrderMoneyList
              },
               {
                name: '消费券',
                type: 'line',
                stack: 'Total',
                label: {
                  show: true,
                  position: 'top'
                },
                areaStyle: {},
                emphasis: {
                  focus: 'series'
                },
                data: this.modeList.yeOrderMoneyList
              },

              ]

              };
      // 第二个
       const options = {
        title: {
            text: '最近15天商家提现记录'
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.totDate
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '提现金额',
              type: 'line',
              stack: 'Total',
              data: this.modeList.cashBusinessRecordList,
              lineStyle: {// 设置线条的style等
                normal: {
                  color: '#1A8BFF', // 折线线条颜色:红色
                },
              },
            }
          ],

       };
            // 第三个
     const optionlist = {
       title: {
              text: '会员新增数据'
              },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.totDate,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '会员新增人数',
            type: 'bar',
            barWidth: '60%',
            data: this.modeList.newUser,
            itemStyle:{
              normal:{
                  color:'#1A8BFF'
              }
          },

          }
        ]
        };
        // 第四个
        const optionmode = {
          title: {
            text: '扫码'
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.totDate
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '扫码',
              type: 'line',
              stack: 'Total',
              data: this.modeList.scanList,
              lineStyle: {// 设置线条的style等
                normal: {
                  color: '#1A8BFF', // 折线线条颜色:红色
                },
              },
            },

          ],
        };
      chartBox.setOption(option);
      chartBoxs.setOption(options);
      chartBoxst.setOption(optionlist);
      chartBoxst.setOption(optionlist);
      chartBoxsmode.setOption(optionmode);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        chartBox.resize();
        chartBoxs.resize();
        chartBoxst.resize();
        chartBoxsmode.resize();
      });
    },

    // 获取数据
    getData(){
    this.request('admin/analysis/', 'get', {}).then(
        res => {
          if (res.errno == 0) {
            // this.dataList[0].nub = Number(res.data.money).toFixed(2)
            // this.dataList[1].nub = Number(res.data.shop_money).toFixed(2)
            // this.dataList[2].nub = Number(res.data.totalMoney).toFixed(2)
            // this.dataList[3].nub = Number(res.data.totalCoupon).toFixed(2)
            // this.dataList[4].nub = Number(res.data.totalOrderMoney).toFixed(2)
            // this.dataList[5].nub = Number(res.data.totalOrderCoupon).toFixed(2)
            // this.dataList[6].nub = Number(res.data.yeTotalOrderMoney).toFixed(2)
            // this.dataList[7].nub = Number(res.data.WxTotalOrderMoney).toFixed(2)
            // this.dataList[8].nub = Number(res.data.AlTotalOrderMoney).toFixed(2)
            // this.dataList[9].nub = Number(res.data.YlTotalOrderMoney).toFixed(2)
            // this.dataList[10].nub = Number(res.data.totalBusinessCashMoney).toFixed(2)
            // this.dataList[11].nub = Number(res.data.totalCashMoney).toFixed(2)
            // this.dataList[12].nub = Number(res.data.totalOrderSupplyMoney).toFixed(2)
            // this.dataList[13].nub =  (Number(res.data.totalOrderMoney) - Number(res.data.totalOrderSupplyMoney)).toFixed(2)
            // this.dataList[14].nub =  Number(res.data.totalOrderMoney).toFixed(2)
            this.totDate = res.data.timeLst
            this.modeList = res.data
            this.getCharts();
          }
        },
        function () {
          console.log('请求失败处理');
        }
      );
  }
  },
};
</script>
<style scoped>
.container{
  background-color: #f5f7fe;
  padding: 10px;
}
  .content{
    width: 100%;
  }
  .screen{
    display: flex;
  }
  .screen>p{
    font-weight: 700;
    font-size: 30px;
    color: #333333;
    margin: 20px 0;
  }
  .totalData{
    width: 100%;
    display: flex;

    flex-wrap: wrap;
    gap: 10px;
  }
  .totalList{
    width: 24%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
    border-radius: 10px;

  }
  .totaName{
    display: flex;
    flex-direction: column;
  }
  .pt{
    font-size: 10px;
    font-family: Source Han Sans SC, Source Han Sans SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #999999;
  }
  .po{
    font-size: 18px;
    font-family: Source Han Sans SC, Source Han Sans SC-Bold;
    font-weight: 700;
    text-align: left;
    color: #000000;
  }
    .totaImg{

    }
    .totaImg>img{
      width: 70px;
      height: 71px;
    }
    .iconList{
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }
    .frstchar{
      width: 59.5%;
      height: 300px;
      background-color: #fff;
      border-radius: 10px;
    }
    .lastchar{
      width: 39.5%;
      height: 300px;
      background-color: #fff;
      border-radius: 10px;
    }
    #maychar{
    width: 100%;
    height: 100%;
  }
  #maycharen{
    width: 100%;
    height: 100%;
  }
  .columnar{
    margin-top: 15px;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: space-between;
  }
  .lopop{
    width: 49.5%;
    height: 100%;
    background-color: #fff;
  }
  #maycharenl{
    width: 100%;
    height: 100%;
  }
  #maycharenmode{
    width:100%;
    height: 100%;

  }
@media screen and (max-width: 768px) {
  .containers{
    padding: 0;
  }
  .totalData{
    display: flex;
    flex-direction: column;
  }
  .totalList{
    width: 100%;
  }
  .iconList{
    display: flex;
    flex-direction: column;
  }
  .frstchar{
    width: 100%;
  }
  .lastchar{
    width: 100%;
    height: 400px;
  }
  .columnar{
    display: flex;
    flex-direction: column;
    height: 600px;
  }
  .lopop{
    width: 100%;
  }
}



</style>
